<template>
	<view class="content">
		<view class="home-drop" id="target">
			<image src="/static/image/main.png" mode="scaleToFill" class="home-drop"></image>
		</view>
		<view class="home-content">
			<view class="home-tips">
				<view class="home-title">Have fun !</view>
				<view class="home-text">享受您的快乐时光!</view>
			</view>
			<view class="home-slide">
				<u-swiper :list="list" height="340" border-radius="28"></u-swiper>
			</view>
			<view>
				<view class="home-grids u-m-t-48">
					<view class="home-grid">
						<view class="home-grid_icon" @click="JoinUs">
							<text class="iconfont icon-jiaruwomen home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">加人我们</view>
					</view>
					<view class="home-grid">
						<view class="home-grid_icon" @click="InviteFriendsQR">
							<text class="iconfont icon-yaoqinghaoyou home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">邀请好友</view>
					</view>
					<view class="home-grid">
						<view class="home-grid_icon">
							<text class="iconfont icon-hudongchoujiang home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">互动抽奖</view>
					</view>
					<view class="home-grid">
						<view class="home-grid_icon" @click="LiveBroadcast">
							<text class="iconfont icon-guankanzhibo home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">观看直播</view>
					</view>
					<view class="home-grid">
						<view class="home-grid_icon">
							<text class="iconfont icon-lianxikefu home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">联系客服</view>
					</view>
				</view>
				<view class="home-grids u-m-t-54 u-m-b-48">
					<view class="home-grid">
						<view class="home-grid_icon" @click="LatestInfo">
							<text class="iconfont icon-zuixinzixun home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">最新资讯</view>
					</view>
					<view class="home-grid">
						<view class="home-grid_icon" @click="Bonus">
							<text class="iconfont icon-fulilingquan home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">福利领劵</view>
					</view>
					<view class="home-grid">
						<view class="home-grid_icon" @click="Preference">
							<text class="iconfont icon-benqiyouxuan home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">本期优选</view>
					</view>
					<view class="home-grid">
						<view class="home-grid_icon">
							<text class="iconfont icon-gengduohezuo home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">更多合作</view>
					</view>
					<view class="home-grid" @click="Points">
						<view class="home-grid_icon">
							<text class="iconfont icon-jifenzhongxin home-grid_icon_f"></text>
						</view>
						<view class="home-grid_label">积分中心</view>
					</view>
				</view>
			</view>
			<!-- 最新活动 -->
			<view>
				<view class="home-num_tips">
					<view class="home-num">01</view>
					<view class="u-flex">
						<view class="u-flex-1">
							<view class="home-num_title">最新活动</view>
							<view class="home-num_text">Receent Activities</view>
						</view>
						<view class="more" @click="EventsAll">
							<view class="">
								查看更多
							</view>
							<view class="u-text-right">
								More
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" style="height: 524rpx;">
					<view class="u-m-t-32 u-m-l-32">
						<navigator class="scroll-view-item_H" v-for="(item,index) in events" :key="index"
							url="/pages/Events/Latest/Latest?Name=2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会">
							<view class="scroll-view-img_H">
								<image src="/static/image/main.png" mode="scaleToFill" class="scroll-img"></image>
							</view>
							<view class="scroll-view-text_H">
								<view class="u-m-b-16">活动商品软件服务\信息技术开发流程服务</view>
								<text class="u-font-18 u-m-r-8">2</text>
								<text>人已报名 | 限<text>30</text>人</text>
							</view>
						</navigator>
					</view>
				</scroll-view>
			</view>
			<view class="home-events_img">
				<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="scaleToFill" class="events-img"></image>
			</view>
			<!-- 最新商品 -->
			<view>
				<view class="home-num_tips">
					<view class="home-num">02</view>
					<view class="u-flex">
						<view class="u-flex-1">
							<view class="home-num_title">最新商品</view>
							<view class="home-num_text">New Product</view>
						</view>
						<view class="more" @click="MallAll">
							<view class="">
								查看更多
							</view>
							<view class="u-text-right">
								More
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" style="height: 524rpx;">
					<view class="u-m-t-32 u-m-l-32 u-m-b-32">
						<view class="scroll-product-item_H" v-for="(item,index) in product" :key="index">
							<view class="scroll-product-img_H" @click="ProductDetail">
								<image src="/static/image/main.png" mode="scaleToFill" class="scroll-img"></image>
							</view>
							<view class="scroll-product-text_H">
								<view>活动商品软件服务信息技术开发</view>
								<view class="u-flex">
									<view class="u-flex-1">￥<text class="product-price">98</text>起</view>
									<view class="scroll-product-img" @click="specificationShow = true">
										<text class="iconfont icon-gouwuche scroll-product-img__icon"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 圈子 -->
			<view>
				<view class="home-num_tips">
					<view class="home-num">03</view>
					<view class="u-flex">
						<view class="u-flex-1">
							<view class="home-num_title">加人圈子</view>
							<view class="home-num_text">Join the Community</view>
						</view>
						<view class="more" @click="CircleAll">
							<view class="">
								查看更多
							</view>
							<view class="u-text-right">
								More
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" style="height: 408rpx;">
					<view class="u-m-t-32 u-m-l-32 u-m-b-32">
						<view class="scroll-circle-item_H" v-for="(item,index) in product" :key="index"
							@click="CircleJoin">
							<view class="scroll-circle-img_H">
								<image src="/static/image/main.png" mode="scaleToFill" class="scroll-img"></image>
								<view class="opaticy">
									<text>二次元文化交流圈</text>
								</view>
							</view>
							<view class="scroll-circle-text_H">
								<view class="u-flex">
									<view class="u-flex-1"><text class="circle-price">30</text>人已加入</view>
									<view class="scroll-circle-img">
										<text class="iconfont icon-jiahao scroll-circle-img__icon"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view style="height: 80rpx;"></view>
		</view>
		<Specification v-model="specificationShow" mode="center" width="80%" :closeable="true" close-icon-pos="center"
			:mask-close-able="false" :list="list1">
		</Specification>
	</view>
</template>

<script>
	var that;
	import Specification from '@/components/Specification/Specification.vue';
	export default {
		components: {
			Specification,
		},
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
				list1: [{
						label: '规格1',
						active: true,
					},
					{
						label: '规格2',
						active: false,
					},
				],
				events: [{}, {}, {}, {}, {}, ],
				product: [{}, {}, {}, {}, {}, ],
				specificationShow: false,
				Height: 0,
			}
		},
		onLoad() {
			that=this;
			that.pubjs.dd();
			console.log(that.pubjs.Now());
		},
		methods: {
			scroll: function(e) {
				console.log(e)
				//this.old.scrollTop = e.detail.scrollTop
			},
			Points() {
				uni.navigateTo({
					url: '/pages/Index/Points/Points'
				});
			},
			Bonus() {
				uni.navigateTo({
					url: '/pages/Home/Bonus/Bonus'
				});
			},
			LatestInfo() {
				uni.navigateTo({
					url: '/pages/Home/LatestInfo/LatestInfo'
				});
			},
			LiveBroadcast() {
				uni.navigateTo({
					url: '/pages/Home/LiveBroadcast/LiveBroadcast'
				});
			},
			InviteFriendsQR() {
				uni.navigateTo({
					url: '/pages/Home/InviteFriendsQR/InviteFriendsQR'
				});
			},
			JoinUs() {
				uni.navigateTo({
					url: '/pages/Home/JoinUs/JoinUs'
				});
			},
			Preference() {
				uni.navigateTo({
					url: '/pages/Home/Preference/Preference'
				});
			},
			ProductDetail() {
				uni.navigateTo({
					url: '/pages/Mall/ProductDetail/ProductDetail?Name=活动商品软件服务信息技术开发'
				});
			},
			EventsAll() {
				uni.switchTab({
					url: '/pages/tabBar/Events/Events'
				});
			},
			MallAll() {
				uni.switchTab({
					url: '/pages/tabBar/Mall/Mall'
				});
			},
			CircleAll() {
				uni.switchTab({
					url: '/pages/tabBar/Circle/Circle'
				});
			},
			CircleJoin() {
				uni.navigateTo({
					url: '/pages/Circle/CircleJoin/CircleJoin?Name=广东爱车族'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.home-img {
			width: 100%;
			height: 100%;
		}

		.events-img {
			width: 100%;
			height: 100%;
			border-radius: 28rpx;
		}

		.home-drop {
			width: 100%;
			height: 720rpx;
			position: fixed;
			z-index: 1;
			.home-drop_img {
				width: 100%;
				height: 100%;
			}
		}

		.home-content {
			width: 100%;
			background-color: #ffffff;
			border-top-left-radius: 28rpx;
			border-top-right-radius: 28rpx;
			position: absolute;
			z-index: 10;
			top: 720rpx;
			margin-top: -40rpx;
			padding-top: 40rpx;
			.home-tips {
				margin-bottom: 32rpx;
				padding: 0 40rpx;

				.home-title {
					font-size: 64rpx;
				}

				.home-text {
					font-size: 36rpx;
				}
			}

			.home-slide {
				padding: 0 32rpx;
			}

			.home-grids {
				display: flex;
				flex-direction: row;
				align-items: center;
				overflow: hidden;
				padding: 0rpx 24rpx;

				.home-grid {
					flex: 1;
					box-sizing: border-box;

					.home-grid_icon {
						width: 64rpx;
						height: 64rpx;
						margin: 0 auto;
						margin-bottom: 4px;

						.home-grid_icon_f {
							font-size: 64rpx;
						}
					}

					.home-grid_label {
						display: block;
						text-align: center;
						color: rgba(0, 0, 0, 0.9);
						font-size: 28rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.home-grid__icon+.home-grid_label {
						margin-top: 8rpx;
					}
				}
			}

			.home-num_tips {
				padding: 0 40rpx;

				.home-num {
					font-size: 64rpx;
					height: 72rpx;
				}

				.home-num_title {
					font-size: 32rpx;
				}

				.home-num_text {
					font-size: 24rpx;
				}
			}

			//横向滚动 start
			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				// overflow-x: hidden;
				// overflow-y: auto;
			}
			::-webkit-scrollbar{
				display: none;
			}
			//活动 ---
			.scroll-view-item_H {
				display: inline-block;
				white-space: normal;
				width: 400rpx;
				height: 420rpx;
				border-radius: 28rpx;
				margin-right: 32rpx;

				.scroll-view-img_H {
					width: 100%;
					height: 264rpx;
					min-height: 264rpx;
				}

				.scroll-img {
					width: 100%;
					height: 100%;
					border-top-left-radius: 28rpx;
					border-top-right-radius: 28rpx;
				}

				.scroll-view-text_H {
					height: 159rpx;
					padding: 12rpx 24rpx;
					border-bottom-left-radius: 28rpx;
					border-bottom-right-radius: 28rpx;
					box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
				}
			}

			//活动 ---
			//商品 ---
			.scroll-product-item_H {
				display: inline-block;
				white-space: normal;
				width: 306rpx;
				height: 420rpx;
				border-radius: 28rpx;
				margin-right: 32rpx;

				.scroll-product-img_H {
					width: 100%;
					height: 264rpx;
					min-height: 264rpx;
				}

				.scroll-img {
					width: 100%;
					height: 100%;
					border-top-left-radius: 28rpx;
					border-top-right-radius: 28rpx;
				}

				.scroll-product-text_H {
					height: 159rpx;
					padding: 16rpx 24rpx;
					border-bottom-left-radius: 28rpx;
					border-bottom-right-radius: 28rpx;
					box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);

					.product-price {
						font-size: 44rpx;
						padding: 0 10rpx;
					}

					.scroll-product-img {
						width: 56rpx;
						height: 56rpx;
						border-radius: 50rpx;
						background-color: #fed500;
						display: flex;
						align-items: center;
						justify-content: center;

						.scroll-product-img__icon {
							font-size: 36rpx;
						}
					}
				}
			}

			//商品 ---
			//圈子 ---
			.scroll-circle-item_H {
				display: inline-block;
				white-space: normal;
				width: 580rpx;
				height: 344rpx;
				border-radius: 28rpx;
				padding-right: 32rpx;
				;

				.scroll-circle-img_H {
					width: 100%;
					height: 264rpx;
					min-height: 264rpx;
					position: relative;

					.opaticy {
						width: 100%;
						height: 48rpx;
						line-height: 48rpx;
						background-color: rgba(0, 0, 0, 0.5);
						position: absolute;
						bottom: 0px;
						color: #ffffff;
						padding: 0 24rpx;
					}
				}

				.scroll-img {
					width: 100%;
					height: 100%;
					border-top-left-radius: 28rpx;
					border-top-right-radius: 28rpx;
				}

				.scroll-circle-text_H {
					height: 80rpx;
					padding: 12rpx 12rpx 12rpx 24rpx;
					border-bottom-left-radius: 28rpx;
					border-bottom-right-radius: 28rpx;
					box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);

					.circle-price {
						font-size: 36rpx;
						padding-right: 10rpx;
					}

					.scroll-circle-img {
						width: 56rpx;
						height: 56rpx;
						border-radius: 50rpx;
						background-color: #fed500;
						display: flex;
						align-items: center;
						justify-content: center;

						.scroll-circle-img__icon {
							font-size: 36rpx;
						}
					}
				}
			}

			//圈子 ---
			//横向滚动 end

			.home-events_img {
				width: 686rpx;
				height: 264rpx;
				border-radius: 28rpx;
				margin: 0 auto;
				padding-bottom: 32rpx;
			}

			.more {
				font-size: 24rpx;
			}
		}
	}
</style>